<template>
  <view class="map-container">
	
	<map
	  id="map"
	  :longitude="destination.longitude"
	  :latitude="destination.latitude"
	  :scale="16"
	  :style="{ width: '100%', height: mapHeight }"
	  :markers="markers"
	  show-location
	  show-compass
	  enable-3D
	  @regionchange="onRegionChange"
	  @tap="onMapTap"
	  v-if="maptype == 1"
	></map>
	  
    <map
      id="map"
      :longitude="userLongitude"
      :latitude="userLatitude"
      :scale="14"
      :style="{ width: '100%', height: mapHeight }"
      :markers="markers"
      :polyline="polyline"
      show-compass
      enable-3D
      @regionchange="onRegionChange"
      @tap="onMapTap"
	  v-else
    ></map>
	
    <view v-if="loading" class="loading-overlay">
      <text class="loading-text">加载中...</text>
    </view>
    <view v-if="error" class="error-overlay">
      <text class="error-text">{{ error }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /**
     * 终点坐标对象，格式为 { latitude: Number, longitude: Number }
     */
    destination: {
      type: Object,
      required: true,
      validator(value) {
        return (
          typeof value.latitude === 'number' &&
          typeof value.longitude === 'number'
        );
      },
    },
    height: {
      type: String,
      default: '100%' // 默认高度为100%
    },
    maptype: {
      type: Number,
      default: 2, // 默认显示两点及路线
    },
  },
  data() {
    return {
      userLatitude: 0, // 当前用户纬度
      userLongitude: 0, // 当前用户经度
      markers: [], // 地图标记
      polyline: [], // 路线
      loading: true, // 加载状态
      error: '', // 错误信息
    };
  },
  mounted() {
    //获取用户定位
    if(this.maptype==2){
    	this.fetchLocation();
    }
  },
  watch: {
    /**
     * 监听 destination 属性的变化
     */
    destination: {
      handler(newVal, oldVal) {
		const latitude = Number(newVal.latitude);
		const longitude = Number(newVal.longitude);
        
		if (
			!isNaN(latitude) &&
			!isNaN(longitude)
        ) {
          this.updateMap();
        }
      },
      deep: true, // 深度监听，以捕捉对象内部的变化
    },
  },
  computed: {
    mapHeight() {
      return this.height;
    },
  },
  methods: {

    /**
     * 获取用户当前位置
     */
    fetchLocation() {
      // #ifdef MP-WEIXIN
      this.$c.uniGetLoaction({
        success: (res) => {
          this.userLatitude = res.latitude;
          this.userLongitude = res.longitude;
          this.updateMap();
          this.loading = false;
        },
        fail: (err) => {
          console.error('微信获取位置失败', err);
          this.error = '获取位置失败，请检查权限';
          this.loading = false;
        },
      });
      // #endif

      // #ifdef MP-ALIPAY
      my.getLocation({
        type: 'gcj02',
        geocode: true,
        success: (res) => {
          this.userLatitude = res.latitude;
          this.userLongitude = res.longitude;
          this.updateMap();
          this.loading = false;
        },
        fail: (err) => {
          console.error('支付宝获取位置失败', err);
          this.error = '获取位置失败，请检查权限';
          this.loading = false;
        },
      });
      // #endif
    },

    /**
     * 更新地图标记和路线
     */
    updateMap() {
      if (this.maptype === 1) {
        // 仅显示用户定位点
        this.setSingleMarker();
      } else if (this.maptype === 2) {
        // 显示两点及路线
        this.setMarkers();
        this.setPolyline();
      }
    },

    /**
     * 设置单个地图标记
     */
    setSingleMarker() {
      this.markers = [
        {
          id: 1,
          latitude: this.destination.latitude,
          longitude: this.destination.longitude,
          title: '租客上车点',
          iconPath: this.getIconPath('1'),
          width: 30,
          height: 30,
          callout: {
            content: '租客上车点',
            color: '#000',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#FFFFFF',
            padding: 5,
            display: 'ALWAYS',
          },
        },
      ];

	// 设置自适应视野
	  this.$nextTick(() => {
	    const mapContext = uni.createMapContext('map', this);
	    mapContext.moveToLocation({
	      latitude: this.destination.latitude,
	      longitude: this.destination.longitude,
	    });
	  });
		  
	this.loading = false; // 渲染完成，直接显示地图
    },

    /**
     * 设置地图标记
     */
    setMarkers() {
      this.markers = [
        {
          id: 1,
          latitude: this.userLatitude,
          longitude: this.userLongitude,
          title: '我的位置',
          iconPath: this.getIconPath('start'),
          width: 30,
          height: 30,
          callout: {
            content: '我的位置',
            color: '#000',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#FFFFFF',
            padding: 5,
            display: 'ALWAYS',
          },
        },
        {
          id: 2,
          latitude: this.destination.latitude,
          longitude: this.destination.longitude,
          title: '租客上车点',
          iconPath: this.getIconPath('end'),
          width: 30,
          height: 30,
          callout: {
            content: '租客上车点',
            color: '#000',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#FFFFFF',
            padding: 5,
            display: 'ALWAYS',
          },
        },
      ];

      // 设置自适应视野
      this.$nextTick(() => {
        const mapContext = uni.createMapContext('map', this);
        mapContext.includePoints({
          padding: [50],
          points: [
            { latitude: this.userLatitude, longitude: this.userLongitude },
            { latitude: this.destination.latitude, longitude: this.destination.longitude },
          ],
        });
      });
    },

    /**
     * 返回图标路径
     */
    getIconPath(type) {
      // 这里可以根据需要调整图标路径
      if (type === 'start') {
        // 起点图标
        return '/static/images/dw-start.png';
      } else if (type === 'end') {
        // 终点图标
        return '/static/images/dw-end.png';
      }
      return '/static/images/dw-1.png'; // 默认图标
    },

    /**
     * 设置路线
     */
    setPolyline() {
      this.polyline = [
        {
          points: [
            { latitude: this.userLatitude, longitude: this.userLongitude },
            { latitude: this.destination.latitude, longitude: this.destination.longitude },
          ],
          color: '#FF0000DD',
          width: 2,
          dottedLine: false,
        },
      ];
    },

    /**
     * 地图区域变化事件
     */
    onRegionChange(e) {
      // 可根据需求处理地图区域变化
    },

    /**
     * 地图点击事件
     */
    onMapTap(e) {
      // 可根据需求处理地图点击
    },
  },
};
</script>


<style scoped>
.map-container {
  position: relative;
}

.loading-overlay,
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading-text {
  font-size: 16px;
  color: #333;
}

.error-text {
  font-size: 16px;
  color: red;
}
</style>
